<template>
    <div id="myChart" :style="{width: '800px', height: '500px'}"></div>
</template>
<script>
    export default {
        name: 'pie',
        mounted(){
            let _this = this
            axios.get('http://localhost:8800/book/pie').then(function (response) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = _this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    backgroundColor: '#2c343c',
                    // title: {
                    //     text: 'Customized Pie',
                    //     left: 'center',
                    //     top: 10,
                    //     textStyle: {
                    //         color: '#ccc'
                    //     }
                    // },
                    tooltip: {
                        trigger: 'item'
                    },
                    visualMap: {
                        show: false,

                    },
                    series: [
                        {
                            name: '价格',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            //数据
                            data: response.data.sort(function (a, b) {
                                return a.value - b.value;
                            }),
                            roseType: 'radius',
                            label: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            labelLine: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            },
                            itemStyle: {
                                color: '#c23531',
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                });
            })

        }
    }
</script>